<template>
  <a-modal
    :title="title"
    :width="650"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('systemManagement.close')"
    wrapClassName="ant-modal-cust-warp"
    >
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
         {{$t('systemManagement.close')}}
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item>
          <div :style="{ borderBottom: '1px solid #E9E9E9' }">
                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                  {{$t('inPrint.selectAll')}}
                </a-checkbox>
              </div>
              <a-checkbox-group class="group-main" @change="onChange" v-model="checkedList" :defaultValue="checkedList" :options="treeData"></a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { batchUpdatePrice,getTenantList } from '@/api/api'
import {  postAction } from '@/api/manage'

  export default {
    name: 'BatchSetPriceModal',
    data () {
      return {
        title:this.$t('popup.batchSettings'),
        visible: false,
        isReadOnly: false,
        ids: [],
        treeData: [],
        checkedList:[],
        checkAll:false,
        indeterminate: true,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          checkedList:{
            rules: [
              { required: true, message: this.$t('popup.pleasePrice')+'!' }
            ]}
        },
        url:{
          batchUpdateUrl:'',
        }
      }
    },
    created () {
    },
    methods: {
      onCheckAllChange(e) {
      let allIds = this.treeData.map(v=>v.value)
      Object.assign(this, {
        checkedList: e.target.checked ? allIds : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
      // 获取租户列表
      getTenantList(){
        return new Promise((resolve, reject) => {
          getTenantList().then(res=>{
          if(res.code == 200){
            let result =  res.data || []
            this.treeData = result.map(v=>{
              let item ={
                label:v.loginName,
                value:v.tenantId,
                id:v.id
              }
              return item
            })
            resolve()
          }else{
            this.$message.error(res.msg || res.data.message || res.data)
            reject()
          }
        })
        })
      },
      onChange(checkedList) {
      },
      changeMode(item) {
      },
      add (type) {
        this.batchType = type
        if(type === 'purchase') {
          this.title = this.$t('popup.purchaseSetting')
        } else if(type === 'commodity') {
          this.title = this.$t('popup.retailSetting')
        } else if(type === 'wholesale') {
          this.title = this.$t('popup.salesSetting')
        } else if(type === 'low') {
          this.title = this.$t('popup.minimumSetting')
        }
        this.edit({});
      },
      async edit (record,dataSource=[]) {
        console.log('dataSource :>> ', dataSource);
        this.ids = record
        let arr = this.ids.match(/,/g)
        await this.getTenantList()
        if(arr.length === 1){
          let item = dataSource.find(v=>v.id === this.ids.replace(/,/g,''))
          if(item){
            this.checkedList = item.syncTenantId && item.syncTenantId.split(',') || []
          }
        }else{
          this.checkedList = []
        }
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      
      handleOk () {
        if(!this.checkedList.length){
          this.$message.error('请选择租户')
          return
        }
        let params = {
          ids:this.ids,
          syncTenantId:this.checkedList.join(',')
        }
        this.confirmLoading = true
          postAction(this.url.batchUpdateUrl,params).then((res)=>{
            this.visible = false
            this.confirmLoading = false
            if(res.code === 200) {
              this.$message.success('success')
              this.$emit('ok')
            }
          })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style>
.group-main .ant-checkbox-group-item{
  width: 150px;
  margin: 5px;
}
</style>